{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Title{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/atelier-dune.light.css' %}">
    <script src="{% static 'js/highlight.pack.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'js/highlightjs-line-numbers.min.js' %}" type="text/javascript" charset="utf-8"></script>
    <style>
    	.hljs {
    		padding: 0;
    	}
    	.hljs-ln td {
		    padding: 2px 10px;
		}
		/* for block of numbers */
		td.hljs-ln-numbers {
		    text-align: center;
		    color: #2F7689;
		    background-color: #EFF2F3;
		    /*border-right: 0.5px solid #CCC;*/
		    vertical-align: top;
		}
		/* for block of code */
		td.hljs-ln-code {
		    padding-left: 5px;
		}
    </style>

</head>
<body>

    <div id="container">
        <div id="wrap">
            <style>
                    form {
                      position: relative;
                      width: 150px;
                      margin: 0 auto;
                    }
                    .d1{
                        float: right;
                        line-height: 67px;
                    }
                    .d1 input {
                      width: 100px;
                      height: 30px;
                      border: 2px solid darkred;
                      border-radius: 5px;
                      outline: none;
                      background: white;
                      color: #1e242a;
                    }
                .post{
                    background-color: #ffffff;
                    border: 1px #000000 solid;
                    border-radius: 10px;
                    padding-left: 15px;
                    padding-top: 10px;
                }
                .created{
                    margin-left: 70%;
                    color: #999999;
                }
                .title{
                    background-color: #272822;
                    color: #ffffff;
                    font-size: 20px;
                    width: 98%;
                    border-radius: 5px;
                    height: 40px;
                    line-height: 40px;
                }
                .modified{
                    color: #687e91;
                    font-size: 12px;
                }
                .desc{
                    color: #272822;
                    background-color: #f8f8f2;
                    width: 98%;
                    border-radius: 5px;
                }
                #page{
                    width: 100%;
                }
                li {
                    margin-left: 5px;
                    list-style-type: square;
                }
                a:link {
                    text-decoration: none;
                } /* 未访问的链接 */
                a:visited {
                     text-decoration: none;
                } /* 已访问的链接 */
                a:hover {
                    text-decoration: underline;
                } /* 鼠标划过链接 */

                 </style>
{#            将头部信息拉取到这个位置#}
            {% include 'header.html' %}
            <div class="outer">
                <div id="main">
{#                将主体信息使用模板继承指定到这个位置#}

                    {% block main %}
                    {% endblock main %}

                </div>
{#            将右边栏信息拉取到这个位置#}
                {% include 'right.html' %}
            </div>
{#            将底部栏信息拉取到这个位置#}
            {% include 'footer.html' %}
        </div>

    </div>
    <script>
		hljs.initHighlightingOnLoad();
		hljs.initLineNumbersOnLoad();
	</script>
</body>
</html>